// 专项工作评估
<template>
  <div class="special-evaluate-container">
    <split-pane
      :min-percent="12"
      :max-percent="50"
      :default-percent="12"
      split="vertical"
    >
      <template slot="paneL">
        <div class="special-evaluate-aside">
          <!-- 左侧菜单树 -->
          <aside-menu :list="menuList" @select-menu="selectedMenu" />
        </div>
      </template>
      <template slot="paneR">
        <div class="special-evaluate-main">
          <main-map :init-layer="initLayer" @on-load="mapLoad">
            <use-case
              file="evaluate"
              v-if="mapLoadOk && useCaseRender"
              :menu="menu"
            />
            <map-switcher
              v-if="mapLoadOk"
              :style="{ right: infoRender ? '406px' : '20px' }"
              class="switcher transition-box map-widget"
            />
            <cus-cascader v-if="mapLoadOk && sq_ok" @change="sq_change" />
          </main-map>
        </div>
      </template>
    </split-pane>
    <!-- 信息框 -->
    <info
      file="evaluate"
      v-model="infoRender"
      :cascader="cascaderInfo"
      :menu="menu"
    />
  </div>
</template>

<script>
import aside from '@c/aside'
import info from '@c/evaluate-info'
import useCase from '@c/evaluate-use-case'
import cusCascader from '@c/cus-cascader'
import splitPane from 'vue-splitpane'
import mainMap from '@v/main-map'
import { createPopup } from '@u/map'
import mapSwitcher from '@c/map/components/map-switcher'

import D2C from 'd2c'
export default {
  name: 'Home',
  provide() {
    const self = this
    return {
      get map() {
        return self.map
      },
      get popup() {
        return self.popup
      },
    }
  },
  components: {
    'aside-menu': aside,
    'use-case': useCase,
    info: info,
    'cus-cascader': cusCascader,
    'split-pane': splitPane,
    'main-map': mainMap,
    'map-switcher': mapSwitcher,
  },
  data() {
    return {
      sq_ok: false, // 是否是完整社区
      infoRender: false, // 显示&隐藏信息框
      useCaseRender: false, // 选中菜单，重新渲染usecase组件
      cascaderInfo: {},

      map: null,
      menu: {},
      mapLoadOk: false, // 地图load是否完成
      popup: null,
      initLayer: [], // 专项评估初始化显现图层
      menuList: [
        {
          id: 'pg_1',
          index_name: '人居环境提升',
          icon_name: '人居环境提升',
          children: [
            {
              id: 'pg_11',
              index_name: '生态环境',
            },
            {
              id: 'pg_12',
              index_name: '居住环境',
            },
            {
              id: 'pg_13',
              index_name: '发展环境',
            },
            {
              id: 'pg_14',
              index_name: '社会环境',
            },
            {
              id: 'pg_15',
              index_name: '安全环境',
            },
            {
              id: 'pg_16',
              index_name: '资源环境',
            },
          ],
        },
        {
          id: 'pg_2',
          index_name: '完整社区',
          icon_name: '完整社区',
          children: [
            {
              id: 'pg_21',
              index_name: '基本公共服务设施',
            },
            {
              id: 'pg_22',
              index_name: '便民商业服务设施',
            },
            {
              id: 'pg_23',
              index_name: '市政配套基础设施',
            },
            {
              id: 'pg_24',
              index_name: '公共活动空间',
            },
            {
              id: 'pg_25',
              index_name: '物业服务',
            },
            {
              id: 'pg_26',
              index_name: '社区管理机制',
            },
          ],
        },
        {
          id: 'pg_3',
          index_name: '清水绿岸',
          icon_name: '清水绿岸',
          is_single: true,
        },
        {
          id: 'pg_4',
          index_name: '异味消除',
          icon_name: '异味消除',
          is_single: true,
        },
      ],
    }
  },
  beforeDestroy() {
    // 移除点击查询
    this.map.off('click', this.mapClickEvent)
  },
  methods: {
    // 社区选择
    sq_change(name) {
      let obj = {
        title: name,
        cascader: [
          {
            title: '社区基本信息',
            map: [
              { key: '面积', value: '-' },
              { key: '人口', value: '-' },
              { key: '地址', value: '-' },
              { key: '小区数量', value: '-' },
            ],
          },
          {
            title: '公共服务',
            map: [
              { key: '社区综合服务站', value: '-' },
              { key: '幼儿园', value: '-' },
              { key: '托儿所', value: '-' },
              { key: '老年服务站', value: '-' },
              { key: '社区卫生服务站', value: '-' },
            ],
          },
          {
            title: '便民商业',
            map: [
              { key: '便民商业服务设施', value: '-' },
              { key: '邮件和快件寄递服务设施', value: '-' },
              { key: '其他便民商业网点', value: '-' },
            ],
          },
          {
            title: '市政配套',
            map: [
              { key: '水、电、路、气、热、信等设施', value: '-' },
              { key: '停车及充电设施', value: '-' },
              { key: '慢行系统', value: '-' },
              { key: '无障碍设施', value: '-' },
              { key: '环境卫生设施', value: '-' },
            ],
          },
          {
            title: '交通设施',
            map: [],
          },
          {
            title: '公共空间',
            map: [
              { key: '公共活动场地', value: '-' },
              { key: '公共绿地', value: '-' },
              { key: '其他便民商业网点', value: '-' },
            ],
          },
          {
            title: '无障碍/适老化',
            map: [
              { key: '公共活动场地', value: '-' },
              { key: '公共绿地', value: '-' },
              { key: '其他便民商业网点', value: '-' },
            ],
          },
          {
            title: '物业服务',
            map: [
              { key: '物业服务', value: '-' },
              { key: '物业管理服务平台', value: '-' },
            ],
          },
          {
            title: '社区管理',
            map: [{ key: '管理机制', value: '-' }],
          },
        ],
      }
      this.cascaderInfo = obj
    },

    mapLoad(e) {
      this.map = e.target
      this.popup = new D2C.Popup({ closeOnClick: false })
      this.mapLoadOk = true
    },
    mapClickEvent(e) {
      const result = this.map.queryRenderedFeatures(e.point)
      console.log(result)
      // 创建popup
      if (!this.popup) {
        this.popup = new D2C.Popup({ closeOnClick: false })
      }
      const html = createPopup(result.slice(0, 1))
      this.popup.setLngLat(e.lngLat).setHTML(html).addTo(this.map)
    },
    isOpenSqMenu(menu) {
      let noSq = [
        // 不是完整社区的指标，统统不显示社区和社区选择
        '人居环境提升',
        '生态环境',
        '居住环境',
        '发展环境',
        '社会环境',
        '安全环境',
        '资源环境',
        '清水绿岸',
        '异味消除',
      ]
      if (noSq.includes(menu.name)) {
        // 隐藏社区选择和社区地形数据
        this.sq_ok = false
        if (this.map.getStyle('wangzhengshequ_layer')) {
          this.map.removeStyle('wangzhengshequ_layer')
          // 移除点击查询
          this.map.off('click', this.mapClickEvent)
          if (this.popup) {
            this.popup.remove()
          }
        }
      } else {
        // 添加社区选择和社区地形数据style
        if (!this.map.getStyle('wangzhengshequ_layer')) {
          // this.map.doubleClickZoom.disable()
          this.map.addStyle(
            'wangzhengshequ_layer',
            window.EVALUATE_LAYERS[0].style,
            {
              onload: () => {
                console.log('完整社区图层添加成功')
                this.sq_ok = true // 图层添加成功后，在显示社区选择组件
              },
            }
          )

          this.map.on('click', this.mapClickEvent)
        }
      }
    },
    selectedMenu(menu) {
      this.useCaseRender = false
      this.isOpenSqMenu(menu) // 判断打开社区
      if (menu.is_single) {
        // 处理菜单
        this.menu = menu

        // 单个菜单，特殊处理
        console.log(menu)
        return false
      }
      this.menu = menu
      this.infoRender = true
      this.$nextTick(() => {
        this.useCaseRender = true // 重渲染useCase
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.special-evaluate-container {
  height: 100%;
  width: 100%;
  position: relative;
  // display: flex;
  .special-evaluate-aside {
    width: 100%;
    height: 100%;
  }
  .special-evaluate-main {
    width: calc(100%);
    height: 100%;
  }
}
</style>
